<template>
	<view :class="themeName">
		<view class="payment u-skeleton">
			<!-- Header -->
			<view class="payment-header">
				<price class="u-skeleton-fillet" :content="amount" mainSize="56rpx" minorSize="40rpx" color="#FFFFFF" />
				<template v-if="timeout > 0">
					<view class="payment-count-down">
						<text>支付剩余时间</text>
						<u-count-down :timestamp="timeout" :show-days="false" :show-hours="false" :font-size="22" />
					</view>
				</template>
			</view>

			<!-- Main -->
			<view class="payment-main">
				<view class="payway-container u-skeleton-fillet">
					<!-- Payway -->
					<u-radio-group v-model="payway" style="width: 100%;">
						<view class="payway">
							<view class="payway-item" v-for="(item, index) in paywayList" :key="item.id"
								@click="changePayway(item.pay_way)">
								<u-image :src="item.icon" width="48" height="48" mode="scaleToFill" />
								<view class="payway-item-content">
									<text class="payway-item-content-name">{{ item.name }}</text>
									<text class="payway-item-content-tips">{{ item.extra }}</text>
								</view>
								<u-radio shape="circle" :name="item.pay_way" :active-color="themeColor" />
							</view>
						</view>
					</u-radio-group>
					<template v-if="!paywayList.length">
						<view class="payway-empty">暂无支付方式</view>
					</template>
				</view>
			</view>

			<!-- Footer -->
			<view class="payment-footer" v-if="paywayList.length">
				<view :class="['payment-submit', 'u-skeleton-fillet', {'payment-submit--disabled': loadingPay}]"
					@tap="handlePrepay">
					<u-loading mode="circle" :show="loadingPay" />
					<text v-show="!loadingPay">立即支付</text>
				</view>
			</view>


			<!-- 页面状态 -->
			<page-status :status="pageStatus">
				<template #error>
					<u-empty :text="pageErrorMsg" src="/static/images/empty/order.png" :icon-size="280" />
				</template>
			</page-status>
		</view>

		<u-skeleton :loading="loadingSkeleton" :animation="true" bgColor="#FFFFFF" />
	</view>

</template>


<script>
	/**
	 * @description 支付页面
	 * @query {String} from 订单来源: order-商品订单; recharge-充值订单;
	 * @query {Number} order_id	订单ID
	 */
	import {
		mapGetters
	} from 'vuex'
	import {
		apiPrepay,
		apiPayway,
		apiPayStatus
	} from '@/api/app'
	import {
		wxpay,
		alipay,
		ttpay
	} from '@/utils/pay'
	import {
		PaymentStatusEnum,
		PayWayEnum,
		PageStatusEnum
	} from '@/utils/enum'

	export default {
		name: 'Payment',

		data() {
			return {
				from: '', // 订单来源
				class: 1, //订单区域
				order_id: '', // 订单ID
				amount: 0, // 支付金额
				timeout: 0, // 倒计时间戳
				payway: '', // 支付方式
				paywayList: [], // 支付方式列表

				pageStatus: PageStatusEnum['NORMAL'],
				pageErrorMsg: '',
				loadingSkeleton: true, // 骨架屏Loading
				loadingPay: false, // 支付处理中Loading
			}
		},
		methods: {
			// 更改支付方式
			changePayway(value) {
				this.$set(this, 'payway', value)
			},

			// 初始化页面数据
			initPageData() {
				// 获取支付方式
				return new Promise((resolve, reject) => {
					apiPayway({
						from: this.from,
						order_id: this.order_id,
						class: this.class
					}).then(data => {
						this.amount = data.order_amount
						this.paywayList = data.lists
						this.payway = this.paywayList[0]?.pay_way
						// 倒计时
						const startTimestamp = new Date().getTime() / 1000
						const endTimestamp = data.cancel_time * 1
						this.timeout = endTimestamp - startTimestamp
						resolve(data)
					}).catch(errMsg => reject(errMsg))
				})
			},
			// 预支付处理
			handlePrepay() {
				if (this.userInfo.is_auth === 0 && this.payway == PayWayEnum['WECHAT']) {
					uni.showModal({
						content: '当前账号未微信授权，请前往个人设置授权',
						confirmColor: this.themeColor,
						confirmText: '前往授权',
						success: ({
							confirm
						}) => {
							if (confirm) {
								this.$Router.push({
									path: '/bundle/pages/user_profile/user_profile',
									query: {
										form: 'payment'
									}
								})
							}
						}
					})
					return
				} 
				// 阻止重复操作
				if (this.loadingPay) return
				this.loadingPay = true
				// 处理：支付
				apiPrepay({
					from: this.from,
					order_id: this.order_id,
					pay_way: this.payway,
				}).then(async ({
					config,
					pay_way
				}) => {
					switch (+pay_way) {
						case PayWayEnum['WALLET']:
							await this.handleWalletPay()
							break
						case PayWayEnum['WECHAT']:
							await this.handleWechatPay(config)
							break
						case PayWayEnum['ALIPAY']:
							await this.handleAlipayPay(config)
							break
						case PayWayEnum['TOUTIAO']:
							await this.handleTtPay(config)
							break
						default:
							throw '支付异常'
					}
				}).then(() => {
					this.handlePayResult(PaymentStatusEnum['SUCCESS'])
				}).catch(errMsg => {
					this.handlePayResult(PaymentStatusEnum['FAIL'])
					console.log('PAYMENT_ERROR_MSG:', errMsg)
				}).finally(() => {
					this.loadingPay = false
				})
			},

			// 微信支付
			handleWechatPay(data) {
				return new Promise((resolve, reject) => {
					wxpay(data)
						.then(async (res) => {
							// #ifndef H5
							resolve(res)
							// #endif

							// #ifdef H5
							this.$on('h5_payment', () => {
								this.queryPayResult().then(result => {
									result ? resolve(res) : reject(res)
								}).catch(errMsg => reject(errMsg))
							})
							// #endif
						})
						.catch(errMsg => reject(errMsg))
				})
			},

			// 支付宝支付
			handleAlipayPay(data) {
				return new Promise((resolve, reject) => {
					alipay(data)
						.then(async (res) => {
							// #ifndef H5
							resolve(res)
							// #endif

							// #ifdef H5
							this.$on('h5_payment', () => {
								this.queryPayResult().then(result => {
									result ? resolve(res) : reject(res)
								}).catch(errMsg => reject(errMsg))
							})
							// #endif
						})
						.catch(errMsg => reject(errMsg))
				})
			},

			// 钱包余额支付
			handleWalletPay() {
				return new Promise((resolve, reject) => {
					resolve('支付成功')
				})
			},
			handleTtPay(data) {
				return new Promise((resolve, reject) => {
					ttpay(data)
						.then(async (res) => {
							resolve(res)
						})
						.catch(errMsg => reject(errMsg))
				})
			},
			// 处理结果
			handlePayResult(result) {
				uni.$emit('duringPayment', {
					result,
					payway: this.payway,
					order_id: this.order_id,
				})
			},

			// 查询支付结果
			queryPayResult() {
				return new Promise((resolve, reject) => {
					apiPayStatus({
						from: this.from,
						order_id: this.order_id,
					}).then(({
						pay_status
					}) => {
						resolve(!!pay_status)
					}).catch(errMsg => reject(errMsg))
				})
			},
		},

		async onLoad() {
			const options = this.$Route.query
			this.from = options.from
			this.order_id = options.order_id
			this.class = options.class

			try {
				if (!this.from && !this.order_id) throw '页面参数有误'
				await this.queryPayResult().then(result => {
					if (result) throw '订单已支付'
				})
				await this.initPageData()
				this.loadingSkeleton = false
			} catch (errMsg) {
				this.pageErrorMsg = errMsg
				this.pageStatus = PageStatusEnum['ERROR']
			}
		},

		onShow() {
			// #ifdef H5
			this.$emit('h5_payment')
			// #endif
		},

		onUnload() {
			this.handlePayResult(PaymentStatusEnum['CLOSE'])
		},
	}
</script>


<style lang="scss" scoped>
	.payment {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100vh;
		max-height: 100vh;
		padding-bottom: calc(100rpx + 20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + 20rpx + env(safe-area-inset-bottom));

		&-header {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 300rpx;
			@include background_linear(260deg) color: #FFFFFF;
		}


		&-main {
			flex: 1;
			margin-top: -40rpx;
			padding: 0 20rpx;
			overflow: hidden;
		}


		&-footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			height: calc(100rpx + constant(safe-area-inset-bottom));
			height: calc(100rpx + env(safe-area-inset-bottom));
			padding: 0 20rpx constant(safe-area-inset-bottom) 20rpx;
			padding: 0 20rpx env(safe-area-inset-bottom) 20rpx;
			background-color: #FFFFFF;
		}

		.payway-container {
			padding: 0 20rpx;
			border-radius: 7px;
			background-color: #FFFFFF;

			.payway-empty {
				display: flex;
				justify-content: center;
				padding: 20rpx 0;
				font-size: $-font-size-sm;
				color: $-color-muted;
			}
		}

		.payway {
			width: 100%;

			&-item {
				width: 100%;
				display: flex;
				align-items: center;
				height: 120rpx;

				&:nth-child(n+2) {
					border-top: $-dashed-border;
				}

				&-content {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 16rpx;

					&-name {
						font-size: $-font-size-nr;
						color: $-color-black;
					}

					&-tips {
						font-size: $-font-size-xxs;
						color: $-color-muted;
					}
				}
			}
		}

		&-count-down {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 7rpx 25rpx;
			border-radius: 60px;
			margin-top: 10rpx;
			font-size: $-font-size-xxs;
			background-color: #FFFFFF;
			color: $-color-normal;
		}

		&-submit {
			flex: 1;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 74rpx;
			font-size: $-font-size-nr;
			border-radius: 60px;
			@include background_linear(260deg) color: #FFFFFF;

			&--disabled::before {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				height: 100%;
				display: block;
				content: "";
				background: rgba(255, 255, 255, .3) !important;
			}
		}


	}
</style>
